<template>
  
  <div>
    
    <!-- 表格数据 -->
    <el-table
      :data="tableData"
      border
      stripe
      header-cell-class-name="headerBg"
      @selection-change="handleSelectionChange"
    >
      <el-table-column prop="id" label="ID" width="50" />
      <el-table-column prop="logoImg" label="logo图片" width="120">
        <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="'http://101.43.223.224:8765/image/getImageById?id=' + scope.row.logoImg"></el-image>
        </template>
      </el-table-column>

      <el-table-column prop="logoText" label="文案" width="120" />

      <el-table-column prop="weixinQrcode" label="微信小程序二维码" width="150">
        <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="
              'http://101.43.223.224:8765/image/getImageById?id=' +
              scope.row.weixinQrcode
            "
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="weixinServe" label="微信服务号图片" width="150">
        <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="
              'http://101.43.223.224:8765/image/getImageById?id=' +
              scope.row.weixinServe
            "
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="longitude" label="经度" width="160" />
      <el-table-column prop="latitude" label="纬度" width="160" />
      <el-table-column prop="phone" label="电话" width="160" />
      <el-table-column prop="createTime" label="创建时间" width="160" />
      <el-table-column prop="updateTime" label="修改时间" width="160" />
      <el-table-column label="操作" width="120">
        <template slot-scope="scope">
          <el-button type="warning" @click="handleEdit(scope.row)">编辑<i class="el-icon-edit"></i></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 编辑弹窗 -->
    <el-dialog title="" :visible.sync="dialogFormVisible">
      <el-form :model="updateForm" ref="updateForm">
        <el-form-item label="logo  图片">
          <el-upload
            class="avatar-uploader"
            action="'getImageById?id='+scope.row.logoImg"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            style="margin-left: 280px"
            :before-upload="beforeAvatarUpload1"
          >
            <img height="200" v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="文案" prop="logoText" >
          <el-input v-model="updateForm.logoText" auto-complete="off"></el-input>
        </el-form-item>
        
        <el-form-item>
          <!-- 百度地图 -->
                <div style="">
                  <baidu-map
                    style="display:flex;flex-direction: column-reverse;"
                    id="allmap"
                    @ready="mapReady"
                    @click="getLocation"
                    :scroll-wheel-zoom="true"
                  >
                    <div style="display:flex;justify-content:center;margin:15px">
                      <bm-auto-complete v-model="searchJingwei" :sugStyle="{zIndex: 999999}">
                        <el-input v-model="searchJingwei" style="width:300px;margin-right:15px" placeholder="输入地址"></el-input>
                      </bm-auto-complete>
                      <el-button type="primary" @click="getBaiduMapPoint">搜索</el-button>
                    </div>
                    <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
                    <bm-marker v-if="infoWindowShow" :position="{lng: updateForm.longitude, lat: updateForm.latitude}">
                      <bm-label content="" :labelStyle="{color: 'red', fontSize : '24px'}" :offset="{width: -35, height: 30}"/>
                    </bm-marker>
                    <bm-info-window :position="{lng: updateForm.longitude, lat: updateForm.latitude}" :show="infoWindowShow" @clickclose="infoWindowClose">
                      <p>经度:{{updateForm.longitude}}</p>
                      <p>纬度:{{updateForm.latitude}}</p>
                    </bm-info-window>
                  </baidu-map>
                </div>
        </el-form-item> 

        <el-form-item label="经度" prop="longitude">
          <el-input v-model="updateForm.longitude" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="纬度" prop="latitude">
          <el-input v-model="updateForm.latitude" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="updateForm.phone" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="微信小程序">
          <el-upload
            class="avatar-uploader"
            action="'getImageById?id='+scope.row.weixinQrcode"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            style="margin-left: 280px"
            :before-upload="beforeAvatarUpload2"
          >
            <img
              height="200"
              v-if="imageFile1"
              :src="imageFile1"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="微信服务号">
          <el-upload
            class="avatar-uploader"
            action="'getImageById?id='+scope.row.weixinServe"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            style="margin-left: 280px"
            :before-upload="beforeAvatarUpload3"
          >
            <img
              height="200"
              v-if="imageFile2"
              :src="imageFile2"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="update('updateForm')">确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      logoImg: "", // log图片
      weixinQrcode: "", // 微信小程序
      weixinServe: "", // 微信服务号
      imageUrl: '', // 图片路径回显
      imageFile1: '', // 图片回显路径
      imageFile2: '', //图片回显路径

      Fileimage:'', // 图片文件1
      Fileimage1:'', // 图片文件2
      Fileimage2:'', // 图片文件3
      tableData: [],
      dialogFormVisible: false,

      searchJingwei:'',
      infoWindowShow:false,
      
      point:'',

      updateForm: {
        id: '',
        logoImg: "",
        logoText: "",
        weixinQrcode: "",
        weixinServe: "",
        phone:"",// 电话
        longitude:'',
        latitude:'',
      },
    };
  },
  created() {
    this.load();
  },
  methods: {
//地图初始化
    mapReady({ BMap, map }) {
          // 选择一个经纬度作为中心点
          // this.point = new BMap.Point(113.27, 23.13);
          this.point = new BMap.Point(this.updateForm.longitude, this.updateForm.latitude);
          map.centerAndZoom(this.point, 12);
          this.BMap=BMap
          this.map=map
    },
    //点击获取经纬度
    getLocation(e){
      this.updateForm.longitude=e.point.lng
      this.updateForm.latitude=e.point.lat
      this.infoWindowShow=true
    },
    getBaiduMapPoint(){
      let that=this
      let myGeo = new this.BMap.Geocoder()
      myGeo.getPoint(this.searchJingwei,function(point){
        if(point){
          that.map.centerAndZoom(point,15)
          that.updateForm.latitude=point.lat
          that.updateForm.longitude=point.lng
          that.infoWindowShow=true
        }
 
      })
    },
    //信息窗口关闭
    infoWindowClose(){
      this.updateForm.latitude=''
      this.updateForm.longitude=''
      this.infoWindowShow=false
    },
    beforeAvatarUpload1(file) {
      // 上传log图片格式
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG && !isPNG) {
        this.$message.error("上传logo图片只能是JPG/PNG格式!");
        return false;
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
        return false;
      }
       // 赋值
    this.Fileimage = file
    console.log(this.imageFile)
      this.imageUrl = URL.createObjectURL(file);
      // isJPG && isLt2M 自动提交 false  是点击确定后提交
      return false;
    },
    beforeAvatarUpload2(file) {
      // 上传微信服务小程序图片格式
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
        return false;
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
        return false;
      }
       // 赋值
    this.Fileimage1 = file
    console.log(this.imageFile1)
      this.imageFile1 = URL.createObjectURL(file);-[]
      // isJPG && isLt2M 自动提交 false  是点击确定后提交
      return false;
    },
    beforeAvatarUpload3(file) {
      // 上传微信服务号图片格式
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
        return false;
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
        return false;
      }
       // 赋值
    this.Fileimage2 = file
    console.log(this.imageFile2)
      this.imageFile2 = URL.createObjectURL(file);
      // isJPG && isLt2M 自动提交 false  是点击确定后提交
      return false;
    },
    //全查
    load() {
      this.$axios.get("/DynamicState/DynamicStateAll", ).then((res) => {
          console.log(res);
          this.tableData = res.data.data;
        });
    },
    //编辑
    handleEdit(row) {
      this.dialogFormVisible = true;
      this.updateForm = JSON.parse(JSON.stringify(row));
      this.imageUrl =
        "http://101.43.223.224:8765/image/getImageById?id=" + row.logoImg;
      this.imageFile1 =
        "http://101.43.223.224:8765/image/getImageById?id=" + row.weixinQrcode;
      this.imageFile2 =
        "http://101.43.223.224:8765/image/getImageById?id=" + row.weixinServe;
    },
    update(updateForm) {
      this.$refs[updateForm].validate((valid) => {
        if (valid) {
          const formData = new FormData();
          if (this.Fileimage) {            
            formData.set("file", this.Fileimage, this.Fileimage.name);
          }
          if (this.Fileimage1) {
            formData.set("file1", this.Fileimage1, this.Fileimage1.name);
          }
          if (this.Fileimage2) {
            formData.set("file2", this.Fileimage2, this.Fileimage2.name);
          }
          for (const key in this.updateForm) {
            formData.set(key, this.updateForm[key]);
          }
          formData.forEach((value, key) => {
          console.log("Aaaaaaaaaaaaaaaaaaaaaaaaaaaaa", key, value);
        })
          this.$axios.post("/DynamicState/DynamicStateUpd",formData).then((res) => {
              if (res.data.flag) {
                this.myMessage("success", "恭喜您，添加成功！"); // 添加成功提示
                this.dialogFormVisible = false; // 关闭窗口

                this.load();
              } else {

                this.myMessage("warning", res.data.data);
              }
            })
            .catch((err) => {
              console.log(err);
              this.myMessage("warning", "对不起，保存失败，请您稍后再试！"); // 添加失败提示
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    myMessage(type, message) {
      this.$message({
        message: message,
        type: type,
      });
    },
  },
  mounted(){
  },
};
</script>
<style>
#allmap{
  height: 450px;
  width: 100%;
  margin: 10px 0;
}
</style>